import {Component, Input, OnInit, AfterViewInit, ViewChild, ElementRef} from '@angular/core';
import {Router} from '@angular/router';
import {NzMessageService} from "ng-zorro-antd/message";
import {PageScrollListenerService, ScrollIndexItem} from "../../services/page-scroll-listener.service";
import {EchartsUtilService} from "../../services/echarts-util.service";
import * as echarts from "echarts";
import {ConstantService} from "../../services/constant.service";
import {HttpClient} from '@angular/common/http';
import {NzModalService} from "ng-zorro-antd/modal";

@Component({
  selector: 'app-determinant',
  templateUrl: './determinant.component.html',
  styleUrls: ['./determinant.component.css']
})
export class DeterminantComponent implements OnInit, AfterViewInit {

  @ViewChild('contentMain', { read: ElementRef, static: false }) contentMain!: ElementRef;

  ngOnInit(): void {

  }

  answerOneVisible:boolean = false;
  answerTwo!:number;
  answerThreeVisible:boolean = false;

  ngAfterViewInit(): void {
    this.initPicture();
    this.pageScroller.init(
      this.contentMain.nativeElement,
      this.siderIndexList,
      (activeId) => this.activeIndexId = activeId
    );
    this.pageScroller.scrollToSection(this.activeIndexId, 60);
  }

  @Input() currentPageTitle: string = '行列式';

  siderIndexList = [
    { id: 'section1', name: '1.1 行列式的定义与性质' },
    { id: 'section2', name: '1.2 行列式的计算' },
    { id: 'section3', name: '1.3 余子式和代数余子式的线性组合的计算' },
    { id: 'section4', name: '1.4 克拉默法则' },
  ];
  activeIndexId: string = 'section1'; // 默认选中第一个索引

  vector: squareVector = {
    a: 0,
    b: 3,
    c: 4,
    d: 4
  }

  constructor(private router: Router,
              private pageScroller: PageScrollListenerService,
              private echartsUtilService: EchartsUtilService,
              private message: NzMessageService,
              private constant: ConstantService,
              private http: HttpClient,
              private modal: NzModalService,) { }

  /**
   * 页面构造图像初始化
   * */
  initPicture(){
    this.initSquare('square',this.vector);
  }

  /**
   * 第二题答案检查
   * */
  checkAnswerTwo(){
    if(typeof this.answerTwo == 'undefined'){
      this.message.warning('您还没输入数字哟');
      return;
    }
    const url = this.constant.getUrl() + '/rest/calculateDeterminant2x2';
    const vec = this.vector;
    this.http.post(url, vec).subscribe({
      next: (ret: any) => {
        if (ret && ret.code === '0000') {
          if(ret.data == this.answerTwo){
            this.modal.info({
              nzTitle: '<i>你的答案很正确</i>',
              nzContent: '<b><app-formula formulaId="determinant-2x2-equal" [displayMode]="true"></app-formula></b>',
              nzOnOk:()=>{}
            });
          } else {
            this.modal.warning({
              nzTitle: '<i>很抱歉，您的答案有误，正确答案是：' + ret.data + '<br>请牢记公式</i>',
              nzContent: '<b><app-formula formulaId="determinant-2x2-equal" [displayMode]="true"></app-formula>注：小数精度偏差请无视</b>',
              nzOnOk:()=>{}
            });
          }
        }
      },
      error: (error) => {
        console.error('http error:', error);
        this.message.error('请求失败：' + (error.error?.message || '未知错误'));
      },
    });
  }

  /**
   * 平行四边形图像生成函数
   * @elementId, vector
   * */
  initSquare(id: string,vec: squareVector):void {
    const chartDom = document.getElementById(id);
    if (chartDom) {
      console.log('init ',id)
      const myChart = echarts.init(chartDom);
      const option = this.echartsUtilService.getParallelogramOption(vec.a, vec.b, vec.c, vec.d);
      myChart.setOption(option);
    }else{
      console.warn('init square error');
    }
  }

  /**
   * 点击索引跳转
   */
  scrollToSection(targetId: string): void {
    this.pageScroller.scrollToSection(targetId, 60);
    this.activeIndexId = targetId;
  }

}

class squareVector {
  a:number = 0;
  b:number = 2;
  c:number = 0;
  d:number = 2;
}
